<template>
	<h-dark :title="t('activity.title')"></h-dark>
	<view class="mx-[30rpx]">
		<view class="ad flex items-center">
			<view class="flex justify-around items-center w-full text-white">
				<view class="text-center">
					<view class=" font-bold text-3xl  mb-[10rpx]">
						{{data.report.today_income}}
					</view>
					<view class=" ">
						{{t('activity.todayIncome')}}
					</view>
				</view>
				<view class="text-center">
					<view class=" font-bold text-3xl mb-[10rpx]">
						{{data.report.total_income}}
					</view>
					<view class=" ">
						{{t('activity.totalIncome')}}
					</view>
				</view>
			</view>
		</view>
		<view class="mt-[20rpx] pb-[30rpx]">
			<view class="bg-[#2C326B] rounded-lg px-[24rpx] py-[40rpx] mb-[20rpx]"
				v-for="(item, index) in data.activities" :key="index">
				<view class="flex justify-between items-center">
					<view class="">
						<view class="font-bold">
							{{replaceStr(replaceStr(t('activity.itemTitle1'),'{money}',item.recharge_money),'{reward}',item.money)}}
						</view>
						<view class="text-[#00D2E0] mt-[10rpx]" v-if="item.count>0">
							<text class="mr-[10rpx]">{{t('activity.itemTips1')}}:</text>{{item.count}}
						</view>
					</view>
					<view class="ml-[30rpx]">
						<u-button type="primary" size="mini" shape="circle">{{t('tabs.pending')}}</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { getActivityIndex } from '@/api/user'
	import { t,replaceStr } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('activity.title') })
	const data = reactive<{
		activities : any[]
		report : any
	}>({
		activities: [],
		report : []
	})

	const getData = async () => {
		const res = await getActivityIndex()
		data.activities = res.activities
		data.report = res.report
	}
	getData()
</script>

<style lang="scss">
	.ad {
		background-image: url('/static/images/activity/activitybg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 112px;
		border-radius: 30rpx;
	}
</style>